<template>
  <div class="supply">
    <!-- 顶部横幅 -->
    <div class="banner-container">
      <div class="banner">
        <div class="banner-image">
          <img :src="require('@/assets/supply/supplier.png')" alt="供应商合作">
        </div>
        <div class="banner-content">
          <h1 class="title">齐心奋进，共创智慧明天！</h1>
          <p class="description">优质供货商招募</p>
        </div>
      </div>
    </div>

    <!-- 供应商类型 -->
    <div class="supplier-types">
      <h2 class="section-title">供应商条件</h2>
      <p class="section-description">我们正在寻找优质的海外流媒体账号、AI账号及稳定服务的供应商，携手共筑智能科技新未来。</p>
      <div class="type-card">
        <div class="type-icon">
          <i class="el-icon-service"></i>
        </div>
        <h3>稳定售后服务</h3>
        <p>账号普遍存在风控风险，所以我们要确保货商可以提供完善的售后服务，以便在出现问题时能够快速进行追踪处理。</p>
        <img src="@/assets/supply/after-sales.png" alt="售后服务" class="type-image">
      </div>

      <div class="type-card">
        <div class="type-icon">
          <i class="el-icon-shopping-cart-full"></i>
        </div>
        <h3>直接供应商</h3>
        <p>我们只希望与直接供货的供应商合作，不希望涉及中间商的转售环节。</p>
        <img src="@/assets/supply/first-hand.png" alt="一手货源" class="type-image">
      </div>

      <div class="type-card">
        <div class="type-icon">
          <i class="el-icon-collection"></i>
        </div>
        <h3>丰富的账号类目</h3>
        <p>我们不仅需要现有的在售商品，还希望接入各类最新、最热门的账号相关商品。</p>
        <img src="@/assets/supply/diverse-accounts.png" alt="丰富类目" class="type-image">
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="contact-section">
      <h2 class="section-title">联系方式</h2>
      <p class="contact-description">如您符合条件，欢迎联系并提交您的产品信息及报价，我们期待与您进一步沟通，探索合作机会。</p>
      
      <div class="contact-card">
        <div class="contact-info">
          <div class="info-item">
            <i class="el-icon-message"></i>
            <span>邮箱: lvsinco@gmail.com</span>
          </div>
          <div class="info-item">
            <i class="el-icon-document"></i>
            <span>报价格式: 产品及规格+报价+联系方式</span>
          </div>
        </div>
        <div class="contact-image">
          <img src="@/assets/supply/contact-robot.png" alt="联系我们">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SupplyView'
}
</script>

<style scoped>
.supply {
  min-height: 100vh;
  background: #F8F9FA;
}

.banner-container {
  background: #F8F9FA;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.banner {
  background: white;
  max-width: 1200px;
  width: 100%;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  border-radius: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.banner-image {
  flex: 1;
  max-width: 500px;
}

.banner-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.banner-content {
  flex: 1;
  color: #3F5D62;
  text-align: left;
  max-width: 500px;
}

.title {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.description {
  font-size: 2rem;
  line-height: 1.4;
  color: rgb(155, 178, 120);
  font-weight: 600;
  margin-top: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding: 5px 0;
}

.description::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #3F5D62, transparent);
}

.supplier-types {
  padding: 60px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #333;
  grid-column: 1 / -1;  /* 让标题占据整行 */
}

.section-description {
  text-align: center;
  color: #666;
  max-width: 800px;
  margin: -20px auto 10px;
  font-size: 1.1rem;
  line-height: 1.6;
  grid-column: 1 / -1;  /* 让副标题也占据整行 */
}

.type-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(63, 93, 98, 0.15);
}

.type-icon {
  font-size: 2.5rem;
  color: #3F5D62;
  margin-bottom: 20px;
}

.type-card h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
}

.type-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.type-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 20px;
}

.contact-section {
  padding: 60px 20px;
  background: white;
}

.contact-description {
  text-align: center;
  color: #666;
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.contact-card {
  background: linear-gradient(135deg, #3F5D62, #87CEEB);
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.contact-info {
  flex: 1;
  padding-right: 40px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.info-item i {
  margin-right: 15px;
  font-size: 1.5rem;
}

.contact-image {
  flex: 1;
  max-width: 350px;
  margin-right: 50px;
}

.contact-image img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .banner {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }

  .banner-content {
    text-align: center;
  }

  .title {
    font-size: 2rem;
  }

  .contact-card {
    flex-direction: column;
    text-align: center;
  }

  .contact-info {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .info-item {
    justify-content: center;
  }

  .description {
    font-size: 1.6rem;
    letter-spacing: 1px;
  }
}
</style>
